<template>
  <div class="chartmap" ref="map_ref"></div>
</template>

<script>
import * as echarts from "echarts";
// import handan from '../common/handan.json'
export default {
  props: {
    itemName:{
      type:String,
      default(){
        return ''
      }
    },
    mapJson: {
      type: Object,
      default: () => {
        return {};
      },
    },
    zoom: {
      type: Number,
      default: 1,
    },
    top: {
      type: String,
      default: "",
    },
    bottom: {
      type: String,
      default: "",
    },
    left: {
      type: String,
      default: "",
    },
    right: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      myData: [
        {
          name: "泗洪县",
          value: 0,
        },
        {
          name: "宿城区",
          value: 0,
        },
        {
          name: "泗阳县",
          value: 0,
        },
        {
          name: "宿豫区",
          value: 0,
        },
        {
          name: "沐阳县",
          value: 0,
        },
      ],
      name:''
    };
  },
  created() {
    this.name = this.itemName
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.map_ref);
      // this.$echarts.registerMap('chartmap', handan);
      this.$echarts.registerMap("chartmap", this.mapJson);
      let serie = {
        type: "map",
        map: "chartmap",
        roam: true,
        data:this.myData,
        zoom: this.zoom,
        label: {
          show: true,
          color: "#fff",
        },
        itemStyle: {
          areaColor: "#101e4f",
          borderColor: "#fff",
        },
      };
      if (this.bottom) {
        serie.bottom = this.bottom;
      }
      if (this.left) {
        serie.left = this.left;
      }
      if (this.right) {
        serie.right = this.right;
      }
      if (this.top) {
        serie.top = this.top;
      }
      const initOption = {
        // color:['red','red','red','red','red'],
        series: [serie],
      };
      this.chartInstance.on('click',function(params) {
        console.log(params)
      })
      this.chartInstance.setOption(initOption);
    },
    screenAdapter() {
      this.chartInstance.resize();
    },
  },
};
</script>

<style scoped lang='scss'>
.chartmap {
  width: 100%;
  height: 100%;
  // background-color: orange;
  // color: #c23531;
}
</style>